<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/layui.css"  />
</head>
<body>
<div>欢迎：${loginUser.realName} <a href="supplier/supplierList">供货商表</a></div>
<div>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">真实姓名：</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="realName" id="realName" autocomplete="off">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">角色：</label>
                <div class="layui-input-block">
                    <select name="roleId" lay-filter="aihao">
                        <option value=""></option>
                        <option value="1">管理系统员</option>
                        <option value="2">店长</option>
                        <option value="3">店员</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
                </div>
            </div>
        </div>
    </form>


        <table class="layui-hide" id="test" lay-filter="test"></table>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">获取选中行数据</button>
         </div>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="show">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

</div>
<script src="${pageContext.request.contextPath}/statics/layui/layui.js" type="text/javascript"></script>
<script  type="text/javascript">
    layui.use(['table','form'], function(){
        var table = layui.table;
        var form = layui.form;

       var tableIns=table.render({
            elem: '#test'
            ,url:'user/list'
           ,toolbar: '#toolbarDemo'
            ,cols: [[
                {field:'id', width:80, title: '编号'}
                ,{field:'account', width:150, title: '账号'}
                ,{field:'realName', width:100, title: '姓名'}
                ,{field:'roleId', width:80, title: '角色'}
                ,{field:'sex', width:80,title: '性别',}
                ,{field:'age', width:80, title: '年龄'}
                ,{field:'phone', width:180, title: '电话'}
               ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:180}
               ,
            ]]
            ,page:true
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            console.log(data.field)
            //这里以搜索为例
            tableIns.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    realName: data.field.realName
                    ,roleId: data.field.roleId
                    //…
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });
        //监听行工具事件

        table.on('toolbar(test)',function (obj){
            switch (obj.even) {
                case "add":
                    window.open("add");
                    break;
            }
        })



        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.email
                }, function (value, index) {
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }else if (obj.even==='show'){
                layer.open("update/"+data.id)
            }
        });
    });
</script>
</body>
</html>
